const obj = {}
const proxy = new Proxy(obj, {
    set: function (target, prop, value) {
        target[prop] = value
    },
    get: function (target, prop) {
        return prop in target ? target[prop] : null
    }
})
console.log("打印初始值proxy.a:", proxy.a)
console.log("打印初始值obj:", obj)
proxy.a = "2"
console.log("打印增加属性proxy.a:", proxy.a)
console.log("打印对象:", obj)

/***
 * 使用Object.defineProperty劫持数据【缺点】：
 * 1、无法检测到对象属性的新增或删除 ，需要使用 set 等其他方法。
 * 2、不能监听数组的变化 ，局限于数组的push/pop/shift/unshift/splice/sort/reverse七个方法
 */
function Vue(options) {
    this.$options = options || {}
    const data = this._data = (typeof this.$options.data) === "function" ? this.$options.data() : {}
    const me = this
    let proxy = null;
    Object.keys(data).forEach(key => {
        proxy = new Proxy(this, {
            set: function (target, key, value) {
                document.querySelector(".container").innerHTML = value
                target[key] = value
                this[key] = value
            },
            get: function (target, key) {
                return key in target ? target[key] : null
            }
        })
    })
    return proxy
}
const vm = new Vue({
    el: "#app",
    data() {
        return {
            name: "小费",
            age: 23,
            year: 2021,
            arr: []
        }
    }
})
console.log("vm:", vm)
// vm.age = 23
vm.age = 26